html,
body {
    height: 100%;
}

$fontColor: rgba(51, 51, 51, 0.9);
#app {
    min-height: 100%;
    position: relative;
    color: $fontColor;
    background: #f8f8f8;
    .base-text {
        color: $fontColor;
        font-family: "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
    }
    .header {
        color: $fontColor;
        background-color: #f5f5f5;
    }
    @media screen and (max-width: 324px) {
        .header {
            .blog-title {
                font-size: 20px;
            }
        }
    }
    .article {
        line-height: 1.6;
    }
    .pagebar-wrap {
        .pagebar-item {
            &.active-link {
                color: #3f51b5;
            }
        }
    }
    @media screen and (max-width: 959px) {
        .pagebar-wrap {
            width: 100%;
            display: flex;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 300;
            justify-content: space-between;
            align-items: center;
            background-color: #f4f4f4;
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid rgba(229, 78, 83, 0.55);
            .pagebar-item {
                flex: 1;
                text-align: center;
                padding: 12px 0;
            }
        }
    }
    @media screen and (max-width: 425px) {
        .pagebar-wrap {
            .pagebar-item {
                padding: 4px 0;
            }
        }
    }
    @media screen and (max-width: 355px) {
        .pagebar-wrap {
            .pagebar-item {
                min-width: 50px;
            }
        }
    }
}